<template>
    <div class="detailContainer">
        <van-overlay :show="show" @click="show = false">
            <div class="loadingContainer">
                <van-loading size="24px" vertical>加载中...</van-loading>
            </div>
        </van-overlay>
        <div class="navContainer">
            <div class="goBack" @click="gotoBack"></div>
            <div class="share"></div>
        </div>
        <div class="goodShow">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
                <van-swipe-item>5</van-swipe-item>
            </van-swipe>
            <div class="goodInfoContainer">
                <div class="goodInfoContent">
                    <p class="goodTitle">{{ good.name }} {{ good.description }}</p>
                    <p class="goodPrice">￥<span>{{ good.price }}</span>起</p>
                    <div class="paySituation">
                        <p class="payPerson">{{ personNum }}+人购买 | {{morePay}}+回头客</p>
                        <p class="payDiscount">满200减80 | 包邮</p>
                    </div>
                </div>
                <div class="mySituation">
                    <div class="selectContent">
                        <p class="ifSelect">{{ good.isSelect }}</p>
                        <p class="whatSelect">{{ good.selectContent }}</p>
                    </div>
                    <div class="location">
                        <p class="whereSend">送至</p>
                        <p class="myLocation">{{ good.location }}</p>
                    </div>
                    <div class="defend">
                        <div class="firstDefend">七天无理由退货</div>
                        <div class="secondDefend">官方质量保证</div>
                        <div class="thirdDefend">极速发货</div>
                    </div>
                </div>
                <div class="commentContainer">
                    <p class="commentNum">评论（{{good.commentNum}}+）</p>
                    <div class="commentSituation">
                        <div class="firstComment"><p>味道很好</p></div>
                        <div class="secondComment"><p>还会回购</p></div>
                        <div class="thirdComment"><p>服务态度好</p></div>
                    </div>
                    <div class="allCommentContainer">
                        <ul class="allComment">
                            <li v-for="comment in comments" :key="comment.id">
                                <div class="comment">
                                    <div class="buyInfo">
                                        <div class="buyer">
                                            <div class="buyerImg"></div>
                                            <p class="buyerName">{{ comment.name }}</p>
                                        </div>
                                        <p class="buyContent">{{ comment.buyContent }}</p>
                                    </div>
                                    <p class="buySay">{{ comment.say }}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="chooseContainer">
            <div class="chooseContent">
                <div class="storeInfo">
                    <div class="store">店铺</div>
                    <div class="ask">客服</div>
                </div>
                <div class="goodShop">
                    <!-- <router-link :to="{
                        name:'shoppingCard',
                        query:{
                            title:this.good.title,
                            num:this.good.price,
                            beforeNum:40.8,
                            changeNum:1,
                            price:this.good.morePrice,
                            gtype:this.good.gtype,
                            isShow:true
                        }
                    }"> -->
                        <div class="goCard" @click="addGood">加入购物车</div>
                    <!-- </router-link> -->
                    <div class="goPay">立即购买</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Swipe, SwipeItem,Overlay,Loading } from 'vant';
import axios from 'axios';
    export default {
        name:'goodDetail',
        components:{
            'van-swipe':Swipe,
            'van-swipe-item':SwipeItem,
            'van-overlay':Overlay,
            'van-loading':Loading
        },
        data(){
            return{
                imgs:[{id:0},{id:1},{id2:2},{id:3},{id:4}],
                good:{title:this.$route.query.title,price:this.$route.query.num,
                    num:10004,more:655,maxPrice:200,subPrice:80,send:'包邮',isSelect:'已选',
                    selectContent:'蓝莓 3斤',location:'四川省成都市龙泉驿区',commentNum:600,morePrice:this.$route.query.price,gtype:this.$route.query.gtype},
                comments:[
                    {id:0,name:'匿名买家',buyContent:'原味豆浆粉 3袋 320g/袋',say:'买了一点蓝莓和几斤西柚，都很新鲜，放了好几天都没坏，西柚汁水多，低糖水果很适合多囊卵巢患者吃，大家可以放心购买。'}
                ],
                show:false
            }
        },
        computed:{
            personNum(){
                if(this.good.num>=10000){
                    return (this.good.num/10000).toFixed(0)+'w'
                }
                else if(this.good.num<10000 && this.good.num>=1000){
                    return (this.good.num/1000).toFixed(0)+'000'
                }
                else if(this.good.num<1000 && this.good.num>=100){
                    return (this.good.num/100).toFixed(0)+'00'
                }
                else{
                    return this.good.num
                }
            },
            morePay(){
                if(this.good.more>=10000){
                    return (this.good.more/10000).toFixed(0)+'w'
                }
                else if(this.good.more<10000 && this.good.more>=1000){
                    return (this.good.more/1000).toFixed(0)+'000'
                }
                else if(this.good.more<1000 && this.good.more>=100){
                    return (this.good.more/100).toFixed(0)+'00'
                }
                else{
                    return this.good.more
                }
            }
        },
        methods:{
            gotoBack(){
                this.$router.back()
            },
            addGood(){
                axios({
                    url:'http://localhost:8080/polycystic/shoppingCart/add',
                    method:'post',
                    headers:{
                        token:localStorage.getItem('jwt')
                    },
                    data:{
                        'goodsId':this.good.id,
                        'description':this.good.description
                    }
                })
                this.show=true
                setTimeout(()=>{
                    this.show=false
                    this.$router.replace({
                        name:'shoppingCard'
                    })
                },1000)
            }
        },
        mounted(){
            let id=this.$route.query.id
            axios({
                url:`http://localhost:8080/polycystic/goods/${id}`,
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                }
            }).then(res=>{
                console.log(res.data.data);
                this.good=res.data.data
                this.good.num=10044
                this.good.more=655
                this.good.selectContent='蓝莓 3斤'
                this.good.location='四川省成都市龙泉驿区'
                this,this.good.isSelect='已选'
                this.good.commentNum=600
            })
        }
    }
</script>

<style scoped>
    .detailContainer{
        width: 100%;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        scrollbar-width: none; 
    }
    .navContainer{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .8rem;
        position: fixed;
        z-index: 1;
        left: .32rem;
    }
    .goBack,.share{
        width: .8rem;
        height: .8rem;
        background-color: #99999990;
        border-radius: 50%;
        background-position: center;
        background-size: .3rem;
        background-repeat: no-repeat;
    }
    .goBack{
        background-image: url(../assets/img/tab+logo@2x/back.png);
    }
    .share{
        background-image: url(../assets/img/tab+logo@2x/share.png);
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 360px;
        text-align: center;
        background-color: #39a9ed;
    }
    .goodShow{
        width: 100%;
        position: relative;
    }
    .goodInfoContainer{
        width: 6.86rem;
        margin: 0 auto;
        position:absolute;
        left:.32rem;
        top:6.6rem;
        padding-bottom: 80px;
    }
    .goodInfoContainer>div{
        background-color: #fff;
        border-radius: .3rem;
        margin-bottom: .2rem;
    }
    .goodInfoContent{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .goodTitle{
        margin-top: .2rem;
        width: 90%;
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .34rem;
    }
    .goodPrice{
        width: 90%;
        margin-top: .2rem;
        color:#FB4866;
        display: flex;
        align-items: end;
        justify-content: left;
        font-family: 'PingFangSC-Mediuem';
    }
    .goodPrice span{
        font-size: .48rem;
    }
    .paySituation{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: .2rem;
        font-family: 'PingFangSC-Regular';
        color: #333333;
        font-size: .24rem;
        margin-bottom: .4rem;
    }
    .payDiscount{
        color:#FB4866;
    }
    .mySituation{
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    .selectContent{
        margin-top: .2rem;
    }
    .mySituation>div{
        width: 90%;
        display: flex;
        align-items: center;
        margin-bottom: .2rem;
    }
    .ifSelect,.whereSend{
        font-family: 'PingFangSC-Mediuem';
        color:#333333;
        font-size: .28rem;
        margin-right: .2rem;
    }
    .whatSelect,.myLocation{
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
    }
    .defend{
        display: flex;
        align-items: center;
        font-size: .24rem;
        color:#999999;
        font-family: 'PingFangSC-Regular';
    }
    .defend>div{
        margin-right: .2rem;
    }
    .commentContainer{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .commentContainer>div{
        width: 90%;
    }
    .commentNum{
        width: 90%;
        font-size: .28rem;
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        margin-top: .2rem;
        margin-bottom: .2rem;
    }
    .commentSituation{
        display: flex;
        align-items: center;
    }
    .commentSituation>div{
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #FB4866;
        border-radius: .24rem;
        margin-right: .2rem;
    }
    .commentSituation>div>p{
        margin: .06rem .1rem;
        color:#FB4866;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
    }
    .allCommentContainer{
        margin-top: .4rem;
    }
    .allComment{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .comment{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: .2rem;
    }
    .buyInfo{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .buyer{
        display: flex;
        align-items: center;
    }
    .buyerImg{
        width: .6rem;
        height: .6rem;
        background-color: #F6F8FA;
        border-radius: 50%;
    }
    .buyerName{
        margin-left: .1rem;
        color: #333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .24rem;
    }
    .buyContent{
        color:#999999;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
    }
    .buySay{
        width: 100%;
        margin-top: .2rem;
        font-size: .24rem;
        font-family: 'PingFangSC-Regular';
        color:#333333;
    }
    .chooseContainer{
        width: 100%;
        height: 1.4rem;
        position: fixed;
        background-color: #fff;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .chooseContent{
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .chooseContent>div{
        display: flex;
        align-items: center;
    }
    .store,.ask{
        color:#999999;
        font-family: 'PingFangSC-Regular';
        font-size: .24rem;
    }
    .ask{
        margin-left: .4rem;
    }
    .goodShop{
        border: 1px solid #FB4866;
        width: 5rem;
        height: .8rem;
        border-radius: .8rem;
    }
    .goodShop div{
        width: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Mediuem';
    }
    .goCard{
        height: 100%;
        color:#FB4866;
        border-left: .8rem;
    }
    .goPay{
        height: 100%;
        border-top-right-radius: .4rem;
        border-bottom-right-radius: .4rem;
        color:#FFF;
        background-color: #FB4866;
    }
    .loadingContainer{
        margin-top: 7rem;
    }
</style>